<template>
  <ActionPanel>
    <ElDescriptions :column="column" border>
      <ElDescriptionsItem label="名称">{{ props.cross }}</ElDescriptionsItem>
      <ElDescriptionsItem label="类型">{{ relationTypes[props.type] }}</ElDescriptionsItem>
      <ElDescriptionsItem label="标签">
        <el-input v-model="data.label" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="注释">
        <el-input v-model="data.comment" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="当前列">
        <ElSelect v-model="data.selfColumn">
          <ElOption v-for="(column, columnName) in selfColumnOptions" :label="column.label" :value="columnName" :key="columnName" />
        </ElSelect>
      </ElDescriptionsItem>
      <ElDescriptionsItem label="目标">
        <TargetEditor v-model:seed-name="data.seedName" v-model:column="data.targetColumn" :type="type" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="'belongsTo' !== data.type" label="级联模式" :span="column">
        <ElSelect v-model="data.cascade">
          <ElOption v-for="(value, key) in cascadeOptions" :label="value" :value="key" :key="key" />
        </ElSelect>
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="['hasMany', 'habtm'].includes(data.type)" label="数据条数" :span="column">
        <ElInputNumber v-model="data.limit" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="'habtm' === data.type" label="关联" :span="column">
        <ThroughEditor v-model:seed-name="data.throughSeedName" v-model:self-column="data.throughSelfColumn" v-model:target-column="data.throughTargetColumn" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="扩展" :span="column">
        <ExtraEditor v-model="data.extra" :type="type" :selfSeedName="seedName" :targetSeedName="data.seedName" :throughSeedName="data.throughSeedName" />
      </ElDescriptionsItem>
    </ElDescriptions>
    <template v-if="close" #footer>
      <ElButton type="primary" @click="doSave">保存</ElButton>
      <ElButton @click="close">关闭</ElButton>
    </template>
  </ActionPanel>
</template>
<script lang="ts" setup>
  import { ElInput, ElSelect, ElOption, ElButton, ElInputNumber, ElDescriptions, ElDescriptionsItem } from 'element-plus'
  import { getSeed } from '@/views/seed-dev'
  import { computed, inject, ref } from 'vue';
  import { ActionPanel } from '@/components/ActionPanel';
  import { closePopupKey } from '@/components/Popup';
  import { cascadeOptions, ExtraEditor, Relaction, relationTypes, save } from '..';
  import ThroughEditor from './ThroughEditor.vue';
  import TargetEditor from './TargetEditor.vue';
  import { RelationType } from '@/views/types';

  const props = defineProps<{seedName: string, type: RelationType, cross: string}>()
  const column = 2

  const selfColumnOptions = computed(() => getSeed(props.seedName).columns)

  const close = inject<() => void>(closePopupKey, void 0)

  const data = ref<Relaction>(getInitData())
  function getInitData() {
    const seed = getSeed(props.seedName)
    switch(props.type) {
      case 'belongsTo': return seed.belongsTo[props.cross]
      case 'hasOne': return seed.hasOne[props.cross]
      case 'hasMany': return seed.hasMany[props.cross]
      case 'habtm': return seed.habtm[props.cross]
    }
  }

  function doSave() {
    save(props.seedName, props.type, props.cross, data.value)
    close?.()
  }
  
</script>